<template>
    <!-- 登录弹框 -->
    <el-dialog v-model="loginData.dialogVisible" title="" width="738px" class="login-dialog-container">
        <div class="my-popup">
            <div class="content">
                <div class="intro">
                    <img src="@/assets/img/person.png" alt="" class="person">
                </div>
                <div class="login" >
                    <div class="wechat-login common-login" v-if="loginData.switchLogin==true">
                        <div class="login-title">
                            <img
                                src="">
                            <div>微信扫码登录</div>
                            <img src=""
                                class="last-login">
                        </div>
                        <div class="qr-content">
                            <img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQF98TwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyWGNWZndiNENkSkMxR0hndTFCY0QAAgQnjZ5lAwSEAwAA"
                                class="qrcode">
                            <img src="@/assets/img/tip-img.png" class="tip-image">
                        </div>
                        <div class="tip">微信点击关注公众号完成登录</div>
                    </div>
                    <div class="phone-login common-login" v-else>
                    <div class="login-title">
                        <img
                            src="">
                        <div>验证码登录</div>
                    </div>
                    <div class="input-content"><input type="text"
                            placeholder="请输入正确的手机号" class="phone">
                        <div class="sms-content"><input type="text" class="sms-text">
                            <div class="sms-btn">获取验证码</div>
                        </div>
                        <div class="login-btn">登录</div>
                    </div>
                </div>

                    <div class="change-login-type" @click="loginData.switchLogin=!loginData.switchLogin">
                        <img src=""
                            class="icon"> 手机登录/注册
                    </div>
                    <div class="protocols"> 登录即代表已阅读并同意 <div class="line">服务协议</div>
                        <div class="line">隐私政策</div>
                    </div>
                </div>
     
            </div>
        </div>
    </el-dialog>
    <header>
        <div class="logo">
            <img src="@/assets/img/logo_wtx.png" alt="" style="width: 40px;height: 50px;">
            <div>
                <img src="@/assets/img/logo_text.png" style="width: 115px;height: 28px;">
                <span>提高您的办公效率</span>
            </div>
        </div>
        <el-popover :width="1200" trigger="hover"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
            <template #reference>
                <div class="header-center">
                    <img style="width:20px;"
                        src=""
                        alt="">
                    <span>全部分类</span>
                </div>
            </template>
            <template #default>
                <div class="mo-categories-dialog ">
                    <div class="level1" :class="index > 0 ? 'level1-dotted' : ''"
                        v-for="level1, index of catagoryData.list">
                        <div class="level1-title">{{ level1.name }}</div>
                        <div class="level2-content">
                            <div class="level2" v-for="level2 of level1.childlist">
                                <div class="level2-title">{{ level2.name }}</div>
                                <div class="level3-content">
                                    <div class="level3" v-for="level3 of level2.childlist"
                                        @click="toCatagoryPage(level1, level2, level3,)">{{ level3.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </el-popover>
        <slot name="login-search"></slot>
        <div class="login-container">
            <img src=""
                alt="">
            <div style="margin-left: 4px;cursor: pointer;" @click="openLoginDialog()">
                <span style="padding-left: 8px;" class="login">未登录</span>
                <div style="color: #8d8d8d;">（点击登录）</div>
            </div>
        </div>
    </header>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@/server';

import { useCatagoryStore } from '@/stores/catagory.js'
let { catagoryData, activeLevel } = useCatagoryStore();

const router = useRouter();
const currentRoute = ref(router.currentRoute);

const getcatagoryList = async () => {
    let res = await axios({
        method: 'post',
        url: '/api/index/getPcFileType',
    })
    catagoryData.list = res.data || [];
}
// 获取分类数据
getcatagoryList();
const toCatagoryPage = (level1, level2, level3,) => {
    catagoryData.currentLevel = level3;
    catagoryData.level0 = catagoryData.list;
    catagoryData.level1 = level1
    catagoryData.level2 = level2
    catagoryData.level3 = level2.childlist[0]
    if (currentRoute.path != '/catagory') {
        router.push({
            path: '/catagory',
        })
    }
    activeLevel.level0Id = level1.id

}
const loginData = reactive({
    dialogVisible: false,
    switchLogin:true
})

const openLoginDialog = () => {
    loginData.dialogVisible = true;
}

</script>
<style lang="less" scoped>
@import url('@/assets/css/header.less');
</style>
<style>
.login-dialog-container {
    border-radius: 6px;
}

.el-dialog__header {
    display: none;
}

.el-dialog__body {
    padding: 0;
}</style>